<!DOCTYPE html>
<html lang="zh-Hans-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title><th:block th:text="${tilesetName}" />Openlayers预览</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="/static/assets/openlayers/v9.2.4/ol.css" rel="stylesheet">
    <script src="/static/assets/openlayers/v9.2.4/ol.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
<div id="map"></div>
<script th:inline="javascript">
    const metaData = [[${metaData}]];
    const basePath = [[${basePath}]];
    const tiles = basePath + "/api/tilesets/" + [[${tilesetName}]] + "/{z}/{x}/{-y}." + metaData.format;

    const vtLayer = new ol.layer.VectorTile({
        background: '#00263D',
        source: new ol.source.VectorTile({
            format: new ol.format.MVT({featureClass: ol.Feature}),
            url: tiles,
            tileGrid: ol.tilegrid.createXYZ({maxZoom: 13})
        }),
        style: function (feature, resolution) {
            if (feature.values_.layer === "place") {
                return new ol.style.Style({
                    text: new ol.style.Text({
                        text: feature.values_.name,
                        font: '12px Calibri,sans-serif',
                        fill: new ol.style.Fill({
                            color: '#FFF'
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#444444',
                            width: 3
                        }),
                        placement: 'point',
                        maxAngle: Math.PI / 4,
                        overflow: true,
                        offsetX: 10,
                        offsetY: 10
                    })
                })
            } else if (feature.values_.layer === "water") {
                return new ol.style.Style({
                    fill: new ol.style.Fill({color: "#015179"}),
                })
            } else if (feature.values_.layer === "waterway") {
                return new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        width: 5,
                        color: "#015179"
                    })
                })
            } else if (feature.values_.layer === "water_name") {
                return new ol.style.Style({
                    text: new ol.style.Text({
                        text: feature.values_.name,
                        font: '12px Calibri,sans-serif',
                        fill: new ol.style.Fill({
                            color: '#FFF'
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#444444',
                            width: 3
                        })
                    })
                })
            } else if (feature.values_.layer === "aeroway") {
            } else if (feature.values_.layer === "landuse") {
                return new ol.style.Style({
                    fill: new ol.style.Fill({color: "#444444"}),
                    stroke: new ol.style.Stroke({
                        width: 1,
                        color: "#06789D"
                    })
                })
            } else if (feature.values_.layer === "transportation") {
                return new ol.style.Style({
                    fill: new ol.style.Fill({color: "#06789D"}),
                    stroke: new ol.style.Stroke({
                        width: getTransportationWidth(feature.values_.class),
                        color: "#06789D"
                    })
                })
            } else if (feature.values_.layer === "transportation_name") {
                return new ol.style.Style({
                    text: new ol.style.Text({
                        text: feature.values_.name,
                        font: '12px Calibri,sans-serif',
                        fill: new ol.style.Fill({
                            color: '#FFF'
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#444444',
                            width: 3
                        })
                    })
                })
            } else if (feature.values_.layer === "aerodrome_label") {
                return new ol.style.Style({
                    text: new ol.style.Text({
                        text: feature.values_.name,
                        font: '12px Calibri,sans-serif',
                        fill: new ol.style.Fill({
                            color: '#FFF'
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#444444',
                            width: 3
                        })
                    })
                })
            } else if (feature.values_.layer === "poi") {
                return new ol.style.Style({
                    text: new ol.style.Text({
                        text: feature.values_.name,
                        font: '12px Calibri,sans-serif',
                        fill: new ol.style.Fill({
                            color: '#FFF'
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#444444',
                            width: 3
                        })
                    })
                })
            } else if (feature.values_.layer === "park") {
                return new ol.style.Style({
                    fill: new ol.style.Fill({color: "#43ad7f"}),
                    stroke: new ol.style.Stroke({
                        width: 1,
                        color: [71, 137, 227, 1]
                    }),
                    text: new ol.style.Text({
                        text: feature.values_.name,
                        fill: new ol.style.Fill({
                            color: "#FFF"
                        }),
                        font: "14px Calibri,sans-serif",
                        stroke: new ol.style.Stroke({
                            color: "#444444",
                            width: 1.5
                        })
                    })
                })
            } else if (feature.values_.layer === "building") {
                return new ol.style.Style({
                    fill: new ol.style.Fill({color: "#05A2F0"}),
                    stroke: new ol.style.Stroke({
                        width: 1,
                        color: "#06789D"
                    })
                })
            } else if (feature.values_.layer === "mountain_peak") {
                return new ol.style.Style({
                    text: new ol.style.Text({
                        text: feature.values_.name,
                        font: '12px Calibri,sans-serif',
                        fill: new ol.style.Fill({
                            color: '#FFF'
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#444444',
                            width: 3
                        })
                    })
                })
            } else if (feature.values_.layer === "landcover") {
                return new ol.style.Style({
                    fill: new ol.style.Fill({color: "#43887f"}),
                })
            } else if (feature.values_.layer === "boundary") {
                return new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        width: 1,
                        color: "#06789D"
                    })
                })
            } else {
                console.log(feature.values_.layer)
            }
        }
    });

    function getTransportationWidth(className) {
        //参考：https://docs.maptiler.com/schema/omt-planet/
        //道路: motorway(高速公路) primary(主干道) secondary(次干道) tertiary(三级道路) minor() rail（铁路） service(通往设施的道路)
        switch (className) {
            case "motorway":
                return 5;
            case "trunk":
                return 4;
            case "primary":
                return 3;
            case "secondary":
                return 2;
            case "tertiary":
                return 1;
            default:
                return 1;
        }
    }

    const boundary = new ol.layer.Vector({
        source: new ol.source.Vector({
            url: '/static/ChinaProvince.geojson',
            format: new ol.format.GeoJSON()
        }),
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: "#70CBFF",
                width: 2,
            })
        }),
    });

    const map = new ol.Map({
        target: 'map',
        view: new ol.View({
            center: ol.proj.fromLonLat([104.100139, 30.654559]),
            zoom: 12,
            projection: 'EPSG:3857'
        }),
        layers: [vtLayer, boundary]
    });

    // 如果 GeoJSON 文件使用的坐标系不是 EPSG:3857，你可能需要添加一个变换
    boundary.getSource().on('addfeature', function(event) {
        const feature = event.feature;
        feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
    });
</script>
</body>

</html>